<template>
  <div class="taskOperation">
    <div class="task-title-box">
      <div class="task-auto-main">
        <!-- title -->
        <div class="task-shop-title">
          <a>店铺名称:</a>
          <a>{{data.shopName}}</a>
        </div>
        <!-- shopmsg -->
        <div class="task-shop-msg">
          <!-- 目标商品 -->
          <div class="task-shop-price" >
            <a v-if="mainType==='pay'">目标商品 :</a>
            <a v-if="mainType==='pay'">注 : 任务总金额</a>
            <a v-if="mainType==='pay'">{{data.goodsMoney}}元</a>
          </div>
          <!-- price -->
          <div class="task-shop-box">
            <div class="task-shop-img"><img :src="imgUrl(data.goodsMainImg)" alt="" title=""></div>
            <div class="task-shop-ul">
              <ul>
                <li>
                  <a>搜索展示价格:</a>
                  <a>{{data.searchprice}}元</a>
                </li>
                <!-- 这里也不同 注意 -->
                <li>
                  <a>商品成交价格:</a>
                  <a>{{data.goodsPrice}}元</a>
                </li>
                <li>
                  <a>规格:</a>
                  <a>{{data.colorSize}}</a>
                </li>
                <li v-if="mainType==='pay'">
                  <a>件数:</a>
                  <a>{{data.number}}件</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- zhanghao -->
    <div class="task-buyer-user">
      <span>买家账号</span>
      <span v-if="user.taobaoList&&user.taobaoList.length>0">{{user.taobaoList[0].acount}}</span>
    </div>
    <!-- time -->
    <!-- <div class="task-time">
      <div class="task-time-box">
        <span>剩余操作时间 ： </span>
        <span class="task-time-span">{{countDown.h | format}}</span>
        <span class="span-left">:</span>
        <span class="task-time-span">{{countDown.m | format}}</span>
        <span class="span-left">:</span>
        <span class="task-time-span">{{countDown.s | format}}</span>
      </div>
    </div> -->
    <!-- 额外要求 -->
    <div class="task-require">
      <div class="require-t">
        <a><img src="static/imgs/a.png" alt="" title=""/></a>
        <a>卖家额外要求</a>
      </div>
      <div class="require-text">
        <span>{{data.explains || '无'}}</span>
      </div>
    </div>
    <!-- 任务要点 -->
    <div class="task-imp-box">
      <div class="require-t" style="background: white;">
        <a><img src="static/imgs/a.png" alt="" title=""/></a>
        <a>任务要点</a>
      </div>
      <!-- list -->
      <div class="task-imp-list">
        <ul>
          <li>
            <a>任务类型</a>
            <a class="red-color">{{mainType==='pay'?data.taskkeyTypeStr:typeTOString()}}</a>
          </li>
          <li>
            <a>搜索关键字</a>
            <a>{{data.keyword}}</a>
          </li>
          <li>
            <a>排序方式</a>
            <a>{{data.locationway}}</a>
          </li>
          <li>
            <a>价格区间</a>
            <a>{{data.lowprice||0}} - {{data.highprice||0}}</a>
          </li>
          <li>
            <a>所在地</a>
            <a>{{data.goodsposition}}</a>
          </li>
          <li>
            <a>商品销量约</a>
            <a>{{data.salesVolume}}</a>
          </li>
          <li>
            <a>件数</a>
            <a>{{data.goodsCount}}</a>
          </li>
          <li>
            <a>规格尺码</a>
            <a>{{data.colorSize}}</a>
          </li>
          <li>
            <a>订单留言</a>
            <a>{{data.orderwords}}</a>
          </li>
          <li v-if="false">
            <a>评论要求</a>
            <a>手机淘宝任务</a>
          </li>
          <li>
            <a>是否假聊</a>
            <a>{{data.chatNecessary===0?'否':'是'}}</a>
          </li>
          <li v-if="false">
            <a>默认签收</a>
            <a>手机淘宝任务</a>
          </li>

        </ul>
      </div>
    </div>
    <!-- 注意事项 -->
    <div class="task-hint-box" v-if="false">
      <div class="task-hint-t">
        <div class="task-hint-auto">
          <a><img src="static/imgs/zhuyi.png" alt="" title=""/></a>
          <a>注意事项</a>
        </div>
      </div>
      <div class="task-hint-ol">
        <div class="task-hint-auto">
          <ol>
            <li>
              <a>1.接受任务的买号和淘宝实际下单的买号必须一致.</a>
            </li>
            <li>
              <a>2.实际下单地址跟金手指绑定的地址必须一致</a>
            </li>
            <li>
              <a>3.付款不允许使用信用卡,否则将在佣金中扣除购物金额的</a>
              <a class="blue-color">1%手续费</a>
            </li>
            <li>
              <a>4.一定要等到快递</a>
              <a class="blue-color">真实签收后</a>
              <a>才确认收货并好评</a>
            </li>
          </ol>
        </div>
      </div>
    </div>
    <!-- 查看截图演示 -->
    <div class="task-look-img" v-if="false">
      <a>查看截图示例图</a>
    </div>
    <!-- 任务步骤 -->
    <div class="task-step-box">
      <div class="step-box">
        <div class="require-t" style="background: white;">
          <a><img src="static/imgs/a.png" alt="" title=""/></a>
          <a>任务步骤</a>
        </div>
        <!-- 核对信息 -->
        <div class="step-box-msg">
          <div class="box-msg-auto">
            <div flex="main:justify">
              <p>核对店铺及商品是否正确</p>
              <div style="font-size: 0.14rem">
                <a>店铺名称:</a>
                <a>{{data.shopName}}</a>
              </div>

            </div>

            <span>商家店铺名称</span>
            <div class="box-msg-input">
              <div class="box-msg-m">
                <input type="text" class="" v-model="submit.shopname" placeholder="如需核实，请在此粘贴店铺名称"/>
              </div>
              <div class="box-msg-b">
                <a @click="submit.shopname=''">清除</a>
                <a @click="checkName">核对</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- buzhou1 -->
      <div class="step-box1">
        <div class="step-box-auto">
          <div class="step-box-t">
            <a><img src="static/imgs/duibi.png" alt="" title=""/></a>
            <a>货比三家</a>
          </div>
          <div class="step-box-con">
            <p>1. 请确认买家用买家账号登录淘宝应用</p>
            <p>2. 请根据<a>任务要点中的搜索关键词</a>自行打开客户端，手动输入</p>
            <p>3. 搜索自动关键词，设置筛选价格区间、所在地缩小范围，找到目标商品</p>
            <p>4.依次点开列表中2个商品，分别截图，商品浏览需慢慢滑动到商品详情底部</p>
            <div class="step-box-search">

              <div flex="main:justify">

                <div class="step-box-input">
                  <div class="step-box-t">搜索结果:</div>
                  <div class="step-box-img img-input-box">
                    <input type="file" class="img-input" @change="upload(arguments,'result')">
                    <img :src="submit.result?imgUrl(submit.result):'static/imgs/addtupian.png'" alt="" title=""/>
                  </div>
                </div>
                <div class="step-box-input">
                  <div class="step-box-t">随机商品1:</div>
                  <div class="step-box-img img-input-box">
                    <input type="file" class="img-input" @change="upload(arguments,'goods1')">
                    <img :src="submit.goods1?imgUrl(submit.goods1):'static/imgs/addtupian.png'" alt="" title=""/>
                  </div>

                </div>
                <div class="step-box-input">
                  <div class="step-box-t">随机商品2:</div>
                  <div class="step-box-img img-input-box">
                    <input type="file" class="img-input" @change="upload(arguments,'goods2')">
                    <img :src="submit.goods2?imgUrl(submit.goods2):'static/imgs/addtupian.png'" alt="" title=""/>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
      <div class="step-box1">
        <div class="step-box-auto">
          <div class="step-box-t">
            <a><img src="static/imgs/tu2.png" alt="" title=""/></a>
            <a>浏览店铺</a>
          </div>
          <div class="step-box-con">
            <p>1.根据商品主图、价格、名称等找到目标商品，点击"进去店铺"按钮</p>
            <p>2.详细浏览目标商品的规格，详情，评价等参数，在商品页至少停留3分钟</p>
            <p>3.上传目标商品截图后，根据图片提示上传对应截图即可</p>
            <div class="">
              <div flex="main:justify" style="margin-bottom: 10px">

                <div class="step-box-input">
                  <div class="step-box-t">商品头部</div>
                  <div class="step-box-img img-input-box">
                    <input type="file" class="img-input" @change="upload(arguments,'head')">
                    <img :src="submit.head?imgUrl(submit.head):'static/imgs/addtupian.png'" alt="" title=""/>
                  </div>
                </div>
                <template v-if="mainType==='pay'">
                  <div class="step-box-input">
                    <div class="step-box-t">商品评价</div>
                    <div class="step-box-img img-input-box">
                      <input type="file" class="img-input" @change="upload(arguments,'ask')">
                      <img :src="submit.ask?imgUrl(submit.ask):'static/imgs/addtupian.png'" alt="" title=""/>
                    </div>

                  </div>
                  <div class="step-box-input">
                    <div class="step-box-t">商品详情</div>
                    <div class="step-box-img img-input-box">
                      <input type="file" class="img-input" @change="upload(arguments,'detail')">
                      <img :src="submit.detail?imgUrl(submit.detail):'static/imgs/addtupian.png'" alt="" title=""/>
                    </div>
                  </div>
                  <div class="step-box-input">
                    <div class="step-box-t">加入购物车</div>
                    <div class="step-box-img img-input-box">
                      <input type="file" class="img-input" @change="upload(arguments,'cart')">
                      <img :src="submit.cart?imgUrl(submit.cart):'static/imgs/addtupian.png'" alt="" title=""/>
                    </div>
                  </div>
                </template>
                <template v-else>
                  <div class="step-box-input">
                    <div class="step-box-t">商品底部</div>
                    <div class="step-box-img img-input-box">
                      <input type="file" class="img-input" @change="upload(arguments,'bottom')">
                      <img :src="submit.bottom?imgUrl(submit.bottom):'static/imgs/addtupian.png'" alt="" title=""/>
                    </div>

                  </div>
                  <div class="step-box-input">
                    <div class="step-box-t">店铺商品1</div>
                    <div class="step-box-img img-input-box">
                      <input type="file" class="img-input" @change="upload(arguments,'shopgoods1')">
                      <img :src="submit.shopgoods1?imgUrl(submit.shopgoods1):'static/imgs/addtupian.png'" alt=""
                           title=""/>
                    </div>
                  </div>
                  <div class="step-box-input">
                    <div class="step-box-t">店铺商品2</div>
                    <div class="step-box-img img-input-box">
                      <input type="file" class="img-input" @change="upload(arguments,'shopgoods2')">
                      <img :src="submit.shopgoods2?imgUrl(submit.shopgoods2):'static/imgs/addtupian.png'" alt=""
                           title=""/>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
        <div class="step-box-hint">
          <div class="step-box-auto">
            <div class="box-hint-t">注意 :</div>
            <div class="box-hint-p">
              <p>1、以上流程请严格执行！商家后台系统可监控到，未按要求执行，产生佣金被扣平台概不负责</p>
              <p>2、此订单共1种产品，合计1件</p>
              <!--<p>3、对应规格： </p>-->
            </div>
            <!-- 这里不同 做判断 -->
            <div class="box-hint-p" style="display: none;">
              <p>以上流程请严格执行！商家后台系统可监控到，未按要求执行，产生佣金被扣平台概不负责</p>
            </div>
          </div>
        </div>
      </div>
      <div class="step-box1">
        <div class="step-box-auto">
          <div class="step-box-t">
            <a><img src="static/imgs/tu3.png" alt="" title=""/></a>
            <a>下单支付</a>
          </div>
          <div class="step-box-con">
            <div>
              <p>1.点击联系客服，要求至少和商家客服有4个问题互动，不得一次性复制4个重复问题，完成截图一张</p>
              <p>2.把商品加入购物车，确认件数、颜色、尺码和留言要求，下单付款</p>
              <p>3.付款完成后，点击订单详情页，截图一张</p>
              <!--<p style="color: #4097ff;">(注 : 下单支付截图, 请点到"查看订单"里面, 截取带有实付金额与订单号的图片)</p>-->
              <div flex="main:justify" style="margin-bottom: 10px" v-if="mainType==='pay'">
                <div class="step-box-input" v-if="data.chatNecessary!==0">
                  <div class="step-box-t">聊天</div>
                  <div class="step-box-img img-input-box">
                    <input type="file" class="img-input" @change="upload(arguments,'talk')">
                    <img :src="submit.talk?imgUrl(submit.talk):'static/imgs/addtupian.png'" alt="" title=""/>
                  </div>
                </div>
                <div class="step-box-input">
                  <div class="step-box-t">下单支付</div>
                  <div class="step-box-img img-input-box">
                    <input type="file" class="img-input" @change="upload(arguments,'pay')">
                    <img :src="submit.pay?imgUrl(submit.pay):'static/imgs/addtupian.png'" alt="" title=""/>
                  </div>

                </div>
              </div>
              <div flex="main:justify" style="margin-bottom: 10px" v-else="">
                <div class="step-box-input">
                  <div class="step-box-t">关注商品</div>
                  <div class="step-box-img img-input-box">
                    <input type="file" class="img-input" @change="upload(arguments,'followGoods')">
                    <img :src="submit.followGoods?imgUrl(submit.followGoods):'static/imgs/addtupian.png'" alt=""
                         title=""/>
                  </div>
                </div>
                <div class="step-box-input">
                  <div class="step-box-t">关注店铺</div>
                  <div class="step-box-img img-input-box">
                    <input type="file" class="img-input" @change="upload(arguments,'followShop')">
                    <img :src="submit.followShop?imgUrl(submit.followShop):'static/imgs/addtupian.png'" alt=""
                         title=""/>
                  </div>

                </div>
                <div class="step-box-input">
                  <div class="step-box-t">加入购物车</div>
                  <div class="step-box-img img-input-box">
                    <input type="file" class="img-input" @change="upload(arguments,'cart')">
                    <img :src="submit.cart?imgUrl(submit.cart):'static/imgs/addtupian.png'" alt="" title=""/>
                  </div>

                </div>
              </div>
            </div>
            <!-- 这里也不同 注意做判断 -->
            <div style="display: none;">
              <p>1.根据浏览行为要求，进行相应操作并上传图片，如：分享/提问。</p>
            </div>
          </div>

        </div>
      </div>
      <!-- 浏览任务没有第四步 注意做判断 -->
      <div class="step-box1" v-if="mainType==='pay'">
        <div class="step-box-auto">
          <div class="step-box-t">
            <a><img src="static/imgs/tu4.png" alt="" title=""/></a>
            <a>填写单号和实付金额</a>
          </div>
          <div class="step-last-input">
            <ul>
              <li>
                <p>填写淘宝/京东/其他平台订单编号，请到手机淘宝/手机京东/其他凭他查看并复制</p>
                <input type="text" class="" v-model="submit.orderid" placeholder="请输入淘宝订单编号"/>
              </li>
              <li>
                <p>填写实际付款金额，手机淘宝/手机京东/其他平台订单详情显示的金额就是实付金额</p>
                <input type="text" v-model.trim.number="submit.paymoney" class="" placeholder="请输入实付金额"/>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- btn -->
    <div class="task-step-btn">
      <div class="task-step-commit" @click="submitInfo">提交任务</div>
    </div>
    <!-- fixed -->
    <div class="fixed-nav">
      <index-footer></index-footer>
    </div>
  </div>
</template>


<script>
  import {Upload} from 'we-plugins'
  import {baseService,taskService} from '#/service'
  import baseMixins from '../../mixins/base'
  import IndexFooter from '@/components/base/IndexFooter'
  import {mapGetters} from 'vuex'

  export default {
    name: 'taskOperation',
    data() {
      return {
        type: 0,
        mainType: '',
        buyTaskId: '',
        checkShopName: false,
        now: new Date().getTime(),
        submit: {
          "ask": "",//商品问答截图
          "askPicture": "",//问大家截图
          "bottom": "",//目标商品底部截图
          "buyerTaskId": null,
          "cart": "",//加入购物车截图
          "delivery": "",//发货截图
          "deliveryTime": "",//发货时间
          "detail": "",//商品详情截图
          "expressEvaluate": "",//物流好评截图
          "expressNo": "",//快递单号
          "expressPicture": "",//快递截图
          "expressStatus": null,//快递状态
          "expressType": null,//物流类型
          "followGoods": "",//关注商品
          "followShop": "",//关注店铺
          "goods1": "",//随机商品1
          "goods2": "",//随机商品2
          "goodsEvaluate": "",//好评截图
          "head": "",//目标商品头部
          "orderTime": "",//下单时间
          "orderid": "",//淘宝/京东订单id
          "pay": "",//下单支付截图
          "paymoney": null,//实际支付金额
          "receivingDate": "",//收货时间
          "result": "",//搜索结果截图
          "shopgoods1": "",//店铺商品1
          "shopgoods2": "",//店铺商品2
          "shopname": "",//店铺名
          "submitTime": "",//提交时间
        },
        data: {},
        id: "",
        spacing: 60 * 60000,
        publishTime: 0,
        result: {},
        times:0,
        rules: {
          shopname: {
            rules: [
              {
                type: 'inFun',
                rule: 'required',
                msg: '店铺名不能为空！'
              },
            ],
            value: '',
            join: 'and'
          }
        }
      }
    },
    created() {
      let newDate=this.getDateDiff(this.$route.query.publishTime)
      this.publishTime=new Date(newDate).getTime();
      // this.publishTime = new Date().getTime() - 30 * 60000;
      this.mainType = this.$route.query.mainType
      this.buyTaskId = this.submit.buyerTaskId = this.$route.query.buyTaskId
      this.id = this.$route.params.id
      if (this.now <= this.publishTime) {
        this.times = this.spacing
      }else if(this.publishTime + this.spacing < this.now){
        this.times=this.spacing
      } else{
        this.times=this.spacing-(this.now-this.publishTime)
      }
      let time=setInterval(()=>{
        if(this.times===0){
          clearInterval(time);
        }else{
          this.times=this.times-1000
        }
      },1000)
      if (this.mainType === 'pay') {
        this.$set(this.rules, 'paymoney', {
          rules: [
            {
              type: 'inFun',
              rule: 'required',
              msg: '实付金额不能为空！'
            },
            {
              type: 'patter',
              rule: /^\d+$/g,
              msg: '请输入数字！'
            },
          ],
          value: '',
          join: 'and'
        })
      }
      this.taskDetail()
    },
    methods: {
      getDateDiff(startDiffTime) {
        return startDiffTime.replace(/\-/g, "/");
      },
      checkImgs() {
        const pay = {
          result: "搜索结果截图",
          goods1: "随机商品1截图",
          goods2: "随机商品2截图",
          head: "目标商品头部截图",
          ask: '商品评价截图',
          detail: "商品详情截图",
          cart: "加入购物车截图",
          pay: "下单截图",
        }
        const notPay = {
          result: "搜索结果截图",
          goods1: "随机商品1截图",
          goods2: "随机商品2截图",
          head: "目标商品头部截图",
          bottom: "目标商品底部截图",
          shopgoods1: "店铺商品1截图",
          shopgoods2: "店铺商品2截图",
          followGoods: "关注商品截图",
          followShop: "关注店铺截图",
          cart: "加入购物车截图",

        }
        if (this.data.chatNecessary===1) {
          pay.talk = "聊天截图"
        }
        if (this.mainType === 'pay') {
          return this.handleCheckImg(pay)
        } else {
          return this.handleCheckImg(notPay)
        }
      },
      handleCheckImg(imgs) {
        let keys = Object.keys(imgs);
        for (let i = 0; i < keys.length; i++) {
          if (!this.submit[keys[i]]) {
            this.$toast({
              message: `${imgs[keys[i]]}不能为空`,
              position: 'middle',
              duration: 2000
            });
            return false
          }
        }
        return true
      },

      async checkName(show = true) {
        if (!this.submit.shopname || !this.submit.shopname.length === 0) {
          this.$toast({
            message: '请输入店铺名！',
            position: 'middle',
            duration: 2000
          });
          return false
        }
        await taskService.checkShop({
          params: {
            shopName: this.submit.shopname,
            buyTaskId: this.buyTaskId
          },
          abnormal: () => {
            this.$toast({
              message: '店铺名验证错误！',
              position: 'middle',
              duration: 2000
            });
          },
          success: () => {
            if (show) {
              this.$toast({
                message: '验证成功！',
                position: 'middle',
                duration: 2000
              });
            }

            this.checkShopName = true
          }
        })
      },
      taskDetail() {
        // taskService.task({
        //   method:'get',
        //   url:'/buyertask/buyer_task/'+this.id,
        //   success:(res)=>{
        //     this.data=res.data
        //   }
        // })
        taskService.taskDetail({
          params: {
            taskkeyid: this.id
          },
          success: (res) => {
            this.data = res.data
          }
        })
      },
      async submitInfo() {
        this.$nextTick(async () => {
          this.result = this.$valiForm.form(this.rules);
          if (this.result.adopt) {
            await this.checkName(false);
            if (!this.checkShopName) {
              return this.$toast({
                message: '店铺名验证错误！',
                position: 'middle',
                duration: 2000
              });
            }

            if (!this.checkImgs()) {
              return
            }
          } else {
            let keys = Object.keys(this.result)
            for (let i = 0; i < keys.length; i++) {
              if (keys[i] !== 'adopt') {
                this.$toast({
                  message: this.result[keys[i]].msg,
                  position: 'middle',
                  duration: 2000
                });
                return
              }
            }
            return
          }
          taskService.taskSubmit({

            data: this.submit,
            success: (res) => {
              this.$toast({
                message: '操作成功',
                position: 'middle',
                duration: 2000
              });
              setTimeout(()=>{
                this.$router.push({
                  name:'orderDetails',
                  query:{
                    type:this.mainType==='pay'?10:70
                  }
                },500)
              })
            }
          })
        })

      },
      typeTOString(){
        if(!this.data.taskkeyType) return ''
        let arrStr=(this.data.taskkeyType+'').split('');
        let str='';
        arrStr.map((item)=>{
          str+=this.switchStr(item);
        })
        return str
      },
      switchStr(str){
        switch (str) {
          case "1":
            return '浏览'
          case "2":
            return "收藏商品"
          case "3":
            return "关注店铺任务"
          case "4":
            return "加购"
          default:
            return ""
        }
      }
    },

    computed: {
      countDown() {
        if (this.times === 0) {
          return {
            h: 0,
            m: 0,
            s: 0,

          }
        } else {

          if (this.times < 60000) {
            return {
              h: 0,
              m: 0,
              s: this.times / 1000,
            }
          } else {
            let m = Math.floor(this.times / 60000);
            let s = Math.floor((this.times - (m * 60000)) / 1000)
            return {
              h: 0,
              m,
              s,
            }
          }
        }
      },
      ...mapGetters([
        'user'
      ]),
      typeStr(){
        switch (this.data.taskkeyType) {
          case "1":
            return '浏览'
          case "2":
            return "收藏商品"
          case "3":
            return "关注店铺任务"
          default:
            return ""
        }
      }
    },
    filters:{
      format(val){
        if(val<10){
          return '0'+val
        }
        return val
      }
    },
    components: {
      IndexFooter
    },
    watch: {
      'submit.shopname': {
        immediate: true,
        handler(newVal) {
          this.rules.shopname.value = newVal
        },
      },
      'submit.paymoney': {
        immediate: true,
        handler(newVal) {
          if (this.rules.paymoney) {
            this.rules.paymoney.value = newVal
          }

        },
      },
    },
    mixins: [baseMixins]
  }
</script>

<style scoped>
  /* 提交 */
  .task-step-btn {
    width: 100%;
    float: left;
    padding: 0.2rem 0;
    background: white;
  }

  .task-step-commit {
    width: 90%;
    margin: 0 auto;
    height: 0.3rem;
    line-height: 0.3rem;
    background: #4097ff;
    text-align: center;
    color: white;
    font-size: 0.12rem;
    border-radius: 0.05rem;
  }

  /* 步骤4 */
  .step-last-input {
    width: 100%;
    height: auto;
    float: left;
  }

  .step-last-input ul li {
    width: 100%;
    height: auto;
    float: left;
  }

  .step-last-input ul li p {
    width: 100%;
    font-size: 0.12rem;
    color: #333;
    line-height: 0.16rem;
    margin: 0.05rem 0;
  }

  .step-last-input ul li input {
    width: 95%;
    height: 0.55rem;
    float: left;
    line-height: 0.55rem;
    padding-left: 5%;
    font-size: 0.12rem;
    background: #eee;
    border-radius: 0.05rem;
  }

  /* 步骤2 */
  .step-box-check .step-class {
    width: 1.5rem;
    margin-bottom: 0.1rem;
  }

  .step-box-hint {
    width: 100%;
    height: 1.2rem;
    float: left;
    border-top: 0.01rem solid #e6e6e6;
  }

  .box-hint-t {
    float: left;
    margin: 0.15rem 0 0 0.1rem;
    color: #ff0101;
    font-size: 0.14rem;
  }

  .box-hint-p {
    float: left;
    width: 2.8rem;
    margin: 0.15rem 0 0 0.1rem;
  }

  .box-hint-p p {
    width: 100%;
    color: #ff0101;
    font-size: 0.14rem;
    margin-bottom: 0.05rem;
  }

  .box-hint-p p:last-child {
    margin-bottom: inherit;
  }

  /* 步骤1 */
  .step-box1 {
    width: 100%;
    height: auto;
    float: left;
    padding-bottom: 0.1rem;
    border-bottom: 0.01rem solid #e6e6e6;
  }

  .step-box-auto {
    width: 90%;
    margin: 0 auto;
  }

  .step-box-t {
    width: 100%;
    height: 0.14rem;
    line-height: 0.2rem;
    padding: 0.1rem 0;
  }

  .step-box-t a {
    display: inline-block;
    float: left;
    color: red;
    font-weight: bold;
    font-size: 0.14rem;
  }

  .step-box-t a:first-child {
    width: 0.18rem;
    height: 0.18rem;
    margin-right: 0.05rem;
  }

  .step-box-t a img {
    display: block;
    width: 100%;
  }

  .step-box-con {
    width: 100%;
  }

  .step-box-con p {
    color: #333;
    font-size: 0.12rem;
    margin-bottom: 0.05rem;
  }

  .step-box-con p:last-child {
    margin-bottom: inherit;
  }

  .step-box-con p a {
    color: #4097ff;
    font-size: 0.12rem;
  }

  .step-box-search {
    width: 100%;
    margin: 0.1rem 0 0 0.2rem;
  }

  .step-box-t {
    width: 100%;
    height: 0.2rem;
    line-height: 0.2rem;
    color: #333;
    font-size: 0.13rem;
  }

  .step-box-input {
    width: 100%;
    float: left;
  }

  .img-input-box {
    position: relative;
  }

  .img-input {
    width: 0.64rem;
    height: 0.64rem;
    opacity: 0;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0
  }

  .step-box-img {
    width: 0.64rem;
    height: 0.64rem;
    float: left;

    margin-right: 0.3rem;
  }

  .step-box-img img {
    width: 100%;
    max-height: 0.64rem;
    display: block;
  }

  .step-box-check {
    float: left;
    margin-top: 0.1rem;
  }

  .step-box-check ul li {
    width: 1.1rem;
    height: 0.3rem;
    line-height: 0.3rem;
    float: left;
  }

  .step-box-check ul li label {
    display: inline-block;
    float: left;
    margin-right: 0.1rem;
    color: #4097ff;
    font-size: 0.13rem;
  }

  .step-box-check ul li label input {
    width: 0.2rem;
    height: 0.2rem;
    float: left;
    background: #eee;
    border-radius: 0.05rem;
    margin-top: 0.05rem;
    vertical-align: middle;
  }

  /* 任务步骤 */
  .task-step-box {
    width: 100%;
    height: 100%;
    background: white;
    float: left;
    margin-top: 0.1rem;
  }

  .step-box {
    width: 100%;
    height: 2.05rem;
    border-bottom: 0.01rem solid #e6e6e6;
  }

  .step-box-msg {
    width: 100%;
    margin-top: 0.15rem;
  }

  .box-msg-auto {
    width: 90%;
    margin: 0 auto;
  }

  .step-box-msg p {
    color: red;
    font-size: 0.13rem;
  }

  .step-box-msg span {
    display: block;
    padding: 0.1rem 0;
    color: #333;
    font-size: 0.14rem;
  }

  .box-msg-input {
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  .box-msg-m {
    width: 99%;
    height: 0.35rem;
    line-height: 0.35rem;
    border: 0.01rem solid #e6e6e6;
    border-radius: 0.05rem;
  }

  .box-msg-m input {
    float: Left;
    outline: none;
    border: none;
    background: none;
    width: 3.2rem;
    font-size: 0.14rem;
    padding: 0.1rem 0 0.1rem 0.1rem;
  }

  .box-msg-b {
    width: 100%;
    margin: 0.15rem 0 0 0.3rem;
  }

  .box-msg-b a {
    display: inline-block;
    float: left;
    margin-right: 0.5rem;
    width: 1.04rem;
    height: 0.3rem;
    font-size: 0.14rem;
    line-height: 0.3rem;
    text-align: center;
    background: #4097ff;
    border-radius: 0.05rem;
    color: white;
    cursor: pointer;
  }

  /* 查看 */
  .task-look-img {
    width: 100%;
    height: 0.46rem;
    float: Left;
    line-height: 0.46rem;
    margin-top: 0.1rem;
    background: white;
    text-align: center;
    font-size: 0.14rem;
    color: #4097ff;
  }

  .task-look-img a {
    font-size: 0.14rem;
    color: #4097ff;
  }

  /* 注意事项 */
  .task-hint-box {
    width: 100%;
    height: 1.7rem;
    float: left;
    margin-top: 0.1rem;
    background: white;
  }

  .task-hint-auto {
    width: 90%;
    margin: 0 auto;
  }

  .task-hint-t {
    width: 100%;
    line-height: 0.45rem;
    height: 0.45rem;
    border-bottom: 0.01rem solid #e6e6e6;
  }

  .task-hint-t a {
    display: inline-block;
    float: left;
    color: #333;
    font-size: 0.14rem;
  }

  .task-hint-t a:first-child {
    width: 0.14rem;
    height: 0.14rem;
    margin: 0.15rem 0.05rem 0 0;
  }

  .task-hint-t a img {
    display: block;
    width: 100%;
  }

  .task-hint-ol {
    width: 100%;
    height: 1.24rem;
    overflow: hidden;
  }

  .task-hint-ol ol li {
    width: 100%;
    float: left;
    margin-bottom: 0.05rem;
  }

  .task-hint-ol ol li:first-child {
    margin-top: 0.15rem;
  }

  .task-hint-ol ol li a {
    color: #333;
    font-size: 0.12rem;
    display: inline-block;
    float: left;
  }

  .task-hint-ol ol li .blue-color {
    color: #4097ff;
  }

  /* 任务要点 */
  .task-imp-box {
    width: 100%;
    height: auto;
    float: left;
    overflow: hidden;
    margin-top: 0.1rem;
  }

  .task-imp-list {
    width: 100%;
    height: auto;
  }

  .task-imp-list ul li {
    width: 100%;
    height: 0.44rem;
    line-height: 0.44rem;
    background: white;
    border-bottom: 0.01rem solid #e6e6e6;
  }

  .task-imp-list ul li a {
    display: inline-block;
    float: left;
    color: #a6a6a6;
    font-size: 0.13rem;
  }

  .task-imp-list ul li .red-color {
    color: red !important;
  }

  .task-imp-list ul li a:first-child {
    margin-left: 0.2rem;
  }

  .task-imp-list ul li a:last-child {
    float: right;
    margin-right: 0.2rem;
    color: #4097ff;
  }

  /* 卖家额外要求 */
  .task-require {
    width: 100%;
    height: 1.23rem;
    float: left;
    margin-top: 0.1rem;
    background: white;
  }

  .require-t {
    width: 100%;
    height: 0.46rem;
    line-height: 0.46rem;
    border-bottom: 0.01rem solid #e6e6e6;
  }

  .require-t a {
    display: inline-block;
    float: left;
    color: #333;
    font-size: 0.14rem;
  }

  .require-t a:first-child {
    width: 0.16rem;
    height: 0.16rem;
    margin: 0.15rem 0.05rem 0 0.2rem;
  }

  .require-t a img {
    display: block;
    width: 100%;
  }

  .require-text {
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  .require-text span {
    display: block;
    font-size: 0.12rem;
    color: blue;
    padding: 0.25rem 0;
    text-align: center;
  }

  /* 操作时间 */
  .task-time {
    width: 100%;
    height: 0.69rem;
    float: left;
    background: white;
    margin-top: 0.1rem;
    line-height: 0.69rem;
  }

  .task-time-box {
    margin-left: 0.4rem;
  }

  .task-time-box span {
    display: inline-block;
    float: left;
    color: #777;
    font-size: 0.16rem;
  }

  .task-time-box span:first-child {
    margin-right: 0.1rem;
  }

  .task-time-box .task-time-span {
    width: 0.38rem;
    height: 0.38rem;
    line-height: 0.39rem;
    text-align: center;
    color: #333;
    font-weight: bold;
    font-size: 0.16rem;
    border-radius: 0.05rem;
    margin-top: 0.15rem;
    border: 0.01rem solid #e6e6e6;
  }

  .task-time-box .span-left {
    padding: 0 0.1rem;
  }

  .taskOperation {
    width: 100%;
    height: 100%;
    padding-bottom: 0.5rem;
    overflow: hidden;
  }

  .task-title-box {
    width: 100%;
    height: 2rem;
    overflow: hidden;
    background: white;
  }

  .task-auto-main {
    width: 94%;
    margin: 0 auto;
  }

  .task-shop-title {
    width: 100%;
    height: 0.34rem;
    line-height: 0.34rem;
    border-bottom: 0.01rem solid #e6e6e6;
  }

  .task-shop-title a {
    display: inline-block;
    float: left;
    color: #7d7d7d;
    font-size: 0.12rem;
  }

  .task-shop-title a:last-child {
    margin-left: 0.05rem;
  }

  .task-shop-msg {
    width: 100%;
    height: 1.66rem;
  }

  .task-shop-price {
    width: 100%;
    height: 0.14rem;
    padding: 0.1rem 0 0.12rem 0;
  }

  .task-shop-price a {
    display: inline-block;
    float: left;
    color: #7d7d7d;
    font-size: 0.13rem;
  }

  .task-shop-price a:first-child {
    color: #4097ff;
    font-weight: bold;
    margin-right: 0.1rem;
  }

  .task-shop-price a:last-child {
    color: #4097ff;
    margin-left: 0.05rem;
  }

  .task-shop-box {
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  .task-shop-img {
    width: 1.1rem;
    height: 1.1rem;
    float: left;
  }

  .task-shop-img img {
    display: block;
    width: 100%;
  }

  .task-shop-ul {
    float: left;
    margin-left: 0.1rem;
    width: 2rem;
    height: auto;
  }

  .task-shop-ul ul li {
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 0.1rem;
  }

  .task-shop-ul ul li:last-child {
    margin-bottom: inherit;
  }

  .task-shop-ul ul li a {
    display: inline-block;
    float: left;
    color: #7d7d7d;
    font-size: 0.13rem;
  }

  .task-shop-ul ul li a:last-child {
    color: #4097ff;
  }

  .task-buyer-user {
    width: 100%;
    height: 0.5rem;
    float: left;
    margin-top: 0.1rem;
    line-height: 0.5rem;
    background: white;
  }

  .task-buyer-user span {
    display: inline-block;
    float: left;
    color: #333;
    font-size: 0.16rem;
  }

  .task-buyer-user span:first-child {
    width: 1.2rem;
    margin-left: 0.3rem;
  }

  .task-buyer-user span:last-child {
    color: #a6a6a6;
    font-size: 0.14rem;
  }
</style>
